<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<ul class="easyui-tree">
  <li>
    <span>节点1</span>
    <ul>
      <li>
        <span>节点1-1</span>
        <ul>
          <li>节点1-1-1</li>
          <li>节点1-1-2</li>
        </ul>
      </li>
      <li>节点1-2</li>
      <li>节点1-3</li>
    </ul>
  </li>
  <li>
    <span>节点2</span>
    <ul>
      <li>节点2-1</li>
      <li>节点2-2</li>
    </ul>
  </li>
</ul>
<hr>
<ul id="tree"></ul>
<script type="text/javascript">
$(document).ready(function () {
  $("#tree").tree({
    /* 检索远程数据的url地址
    对于json，主要属性包括id，text，iconCls，children，state等 */
    url: 'tree.json',
    //检索数据的http方式，默认值为post
    //method: 'post',
    //是否显示树控件上的虚线，默认值为false
    lines: true,
    //是否启用拖拽功能，默认值为false
    dnd: true,
    //是否在每一个节点之前都显示复选框，默认值为false
    checkbox: true,
    //定义节点在展开或折叠的时候是否显示动画效果，默认值为false
    animate: true,
    //是否层叠选中状态，默认值为true
    cascadeCheck: true,
    //手动加载数据
    //data: [],
    //是否只在末级节点之前显示复选框，默认值为false
    onlyLeafCheck: true,
    //如何渲染节点的文本
    /* formatter: function (node) {
      //返回节点本身或其特定属性
    }, */
    /* 如何从远程服务器加载数据，返回false可以忽略本操作。该函数具备以下参数：
    param：发送到远程服务器的参数对象。
    success(data)：当检索数据成功的时候调用的回调函数。
    error()：当检索数据失败的时候调用的回调函数 */
    //loader: function (param, success, error) {},
    /* 返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
    data：加载的原始数据。
    parent: DOM对象，代表父节点。 */
    //loadFilter: function (data, parent) {}
  })
})
</script>
</body>
</html>